<template>
    <div>
        <div class="container">
            <div class="search-box">
                <el-input
                        v-model="query.key"
                        placeholder="姓名"
                        class="search-input mr10"
                        clearable
                ></el-input>
                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true"
                >新增
                </el-button
                >
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
            >
                <el-table-column
                        prop="id"
                        label="ID"
                        width="200"
                        align="center"
                ></el-table-column>
                <el-table-column label="缩略图" align="center" width="400">
                    <template #default="scope">
                        <el-image
                                class="table-td-thumb"
                                :src="scope.row.thumbnailUrl"
                                :z-index="10"
                                :preview-src-list="[scope.row.thumbnailUrl]"
                                preview-teleported
                        >
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="phone" label="电话" align="center"></el-table-column>
                <el-table-column prop="fax" label="传真" align="center"></el-table-column>
                <el-table-column prop="email" width="300" label="邮箱" align="center"></el-table-column>
                <el-table-column
                        prop="updateTime"
                        label="上传时间"
                        align="center"
                        :formatter="dateFormat"
                ></el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template #default="scope">
                        <el-button
                                type="primary"
                                size="small"
                                :icon="Edit"
                                @click="handleEdit(scope.$index, scope.row)"
                                v-permiss="15"
                        >
                            编辑
                        </el-button>
                        <el-button
                                type="danger"
                                size="small"
                                :icon="Delete"
                                @click="handleDelete(scope.$index, scope.row)"
                                v-permiss="16"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.page"
                        :page-size="query.size"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog
                :title="idEdit ? '编辑' : '新增'"
                v-model="visible"
                width="500px"
                destroy-on-close
                :close-on-click-modal="false"
                @close="closeDialog"
        >
            <TableEdit :data="rowData" :edit="idEdit" :update="updateData"/>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="basetable">
    import {ref, reactive} from "vue";
    import {ElMessage, ElMessageBox} from "element-plus";
    import {Delete, Edit, Search, CirclePlusFilled, View} from "@element-plus/icons-vue";
    import pressContact from "../api/pressContact";
    import TableEdit from "../components/presscontact-table-edit.vue";

    interface TableItem {
        id: number;
        title: string;
        resourceUrl: string;
        des: string;
        publishTime: string;
        insertTime: string;
    }

    const query = reactive({
        key: "",
        page: 1,
        size: 10,
    });

    const tableData = ref<TableItem[]>([]);
    const pageTotal = ref(0);
    // 获取表格数据
    const getData = () => {
        pressContact.selectPages(query, (res) => {
            if (res.code === 200) {
                tableData.value = res.data.list;
                pageTotal.value = Number(res.data.total) || 50;
            }
        });
    };

    getData();

    // 查询操作
    const handleSearch = () => {
        query.page = 1;
        getData();
    };
    // 分页导航
    const handlePageChange = (val: number) => {
        query.page = val;
        getData();
    };

    // 删除操作
    const handleDelete = (index: number, item: TableItem) => {
        // 二次确认删除
        ElMessageBox.confirm("确定要删除吗？", "提示", {
            type: "warning",
        })
            .then(() => {
                pressContact.delete({id: item.id}, (res) => {
                    if (res.code === 200) {
                        ElMessage.success("删除成功");
                        tableData.value.splice(index, 1);
                    } else {
                        ElMessage.warning(res.message);
                    }
                });
            })
            .catch(() => {
            });
    };

    const visible = ref(false);
    let idx: number = -1;
    const idEdit = ref(false);
    const rowData = ref({});
    const handleEdit = (index: number, row: TableItem) => {
        console.log(row);
        idx = index;
        // row.publishTime = Number(row.publishTime);
        rowData.value = row;
        rowData.value["publishTime"] = Number(row.publishTime);
        idEdit.value = true;
        visible.value = true;
    };

    const updateData = () => {
        // console.log(row);
        // idEdit.value ? (tableData.value[idx] = row) : tableData.value.unshift(row);
        // console.log(tableData.value);

        closeDialog();
        getData();
    };

    const closeDialog = () => {
        visible.value = false;
        idEdit.value = false;
    };

    const visible1 = ref(false);
    const handleView = (row: TableItem) => {
        rowData.value = row;
        visible1.value = true;
    };

    import {getCurrentInstance} from "vue";

    const {proxy}: any = getCurrentInstance()
    const dateFormat = (row, column, value) => {
        return proxy.$dateFormat(value, "MM/dd/yyyy")
    }
</script>

<style scoped>
    .search-box {
        margin-bottom: 20px;
    }

    .search-input {
        width: 200px;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 300px;
    }

    :deep(.el-image__inner) {
        height: 200px;
        width: 200px;
        object-fit: cover;
        transition: all 0.6s;
    }
</style>
